<template>
	<view class="" :style="{'background': backgroundColor}">
<!--		<ljshop-back></ljshop-back>-->
		<view class="imgbox">
			<image :src="backgroundImg" mode="widthFix"></image>
		</view>
		<view class="body">
			<shHotList :backgroundColor="backgroundColor" :page="page" @getImg="getImg"  ref="hotlist"></shHotList>
		</view>
	</view>
</template>

<script>
import shHotList from './universalWaterFall.vue'

	export default{
  components:{
    shHotList,
  },
		data(){
			return{
		    page: 1,
        backgroundColor: '#f6f6f6',
        backgroundImg: ''
			}
		},
    onLoad(e){
      setTimeout(()=>{
        this.$refs.hotlist.id = e.id
        e.backgroundColor ? this.backgroundColor = '#' + e.backgroundColor : this.backgroundColor
        this.$refs.hotlist.hasUserGet()
      },200)

    },
    onReachBottom() {
    if(this.$refs.hotlist.onEnd) return
	this.incrementPage().then(() => {
		this.$refs.hotlist.hasUserGet()
	})
    },
	  methods:{
		getImg(e){
			this.backgroundImg = e.backgroundImg
			uni.setNavigationBarTitle({
			title: e.name
			})
		},
		incrementPage() {
			return Promise.resolve(this.page += 1);
		}
	  }
	}
</script>

<style lang="scss" scoped>
	.imgbox{
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>